<template>
  <div class="common-layout">
    <el-container>
      <el-aside style="height: 100vh; width: 16vw">
        <el-row class="tac">
          <el-col :span="12">
            <el-menu default-active="2" class="el-menu-vertical-demo" :router="true">
              <el-sub-menu index="" class="disabled-menu">
                <template #title>
                  <img src="../img/屏幕截图 2024-07-27 202558.png" alt="" style="width: 4vw" />
                  <span>千峰后台管理系统</span>
                </template>
              </el-sub-menu>
              <el-menu-item index="/">
                <el-icon><House /></el-icon>
                <span>首页</span>
              </el-menu-item>
              <el-sub-menu index="/list">
                <template #title
                  ><el-icon><document /></el-icon>商品管理</template
                >
                <el-menu-item index="/list">商品列表</el-menu-item>
                <el-menu-item index="/add">商品添加</el-menu-item>
              </el-sub-menu>
              <el-menu-item index="/user">
                <el-icon><setting /></el-icon>
                <span>用户信息</span>
              </el-menu-item>
              <el-menu-item index="/set">
                <el-icon><setting /></el-icon>
                <span>系统设置</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container>
        <el-header
          style="
            text-align: right;
            font-size: 12px;
            box-sizing: border-box;
            padding-top: 5px;
            font-size: 16px;
          "
        >
          <div class="toolbar">
            <el-dropdown>
              <el-icon style="margin-right: 8px; margin-top: 5px">
                <setting />
              </el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="edit()">修改信息</el-dropdown-item>
                  <el-dropdown-item @click="out()">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <span>{{ obj.nickname ? obj.nickname : obj.username }}</span>
          </div>
        </el-header>

        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>

  <!-- 用户修改 -->
  <el-dialog v-model="dialogFormVisible" title="修改信息" width="500">
    <el-form :model="userhand">
      <el-form-item label="昵称">
        <el-input v-model="userhand.nickname" />
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="userhand.gender" placeholder="Please select a zone">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input-number v-model="userhand.age" :step="2" style="width: 100%" />
      </el-form-item>
      <el-form-item label="身份">
        <el-input v-model="userhand.identity" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="yes()"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { ElNotification } from 'element-plus'
import { updateReq, infoReq, logout } from '../stores/https'
export default {
  methods: {
    //退出登录
    out() {
      localStorage.removeItem('token')
      if (!localStorage.getItem('token')) {
        ElNotification({
          title: '退出登录',
          message: '专心去玩吧！'
        })
        location.href = '/login'
      }
    },
    //编辑框确定
    yes() {
      if (this.userhand.age > 0 && this.userhand.age <= 100) {
        updateReq(
          this.obj.id,
          this.userhand.age,
          this.userhand.gender,
          this.userhand.nickname
        ).then((r) => {
          console.log(r.data)
          this.dialogFormVisible = false
          ElNotification({
            title: r.data.message,
            message: '你真棒啊孩子'
          })
          this.loadlist()
        })
      } else {
        ElNotification({
          title: '年龄不对孩子',
          message: '离谱的年龄就像离谱的你一样，总是让人无语'
        })
      }
    },
    // 修改用户信息
    edit() {
      this.userhand = { ...this.obj }
      this.dialogFormVisible = true
    },
    // 刷新列表
    loadlist() {
      const user = JSON.parse(localStorage.getItem('user'))
      infoReq(user.id).then((r) => {
        console.log(r.data.info)
        this.obj = r.data.info
        console.log(this.obj)
      })
    }
  },
  data() {
    return {
      obj: {},
      userhand: {},
      dialogFormVisible: false
    }
  },
  mounted() {
    this.loadlist()
  }
}
</script>
<style lang="css">
.el-col-12 {
  flex: 0 0 50%;
  max-width: 100%;
}
.el-menu-vertical-demo,
.tac {
  height: 100%;
  width: 100%;
}
.icon {
  color: black;
}
.disabled-menu {
  pointer-events: none; /* 防止点击事件 */
}
.disabled-menu /deep/ .el-sub-menu__title {
  color: inherit !important; /* 保持颜色不变，根据实际情况调整 */
}
</style>
